<template>
	<view class="">
		<!-- 微信员工添加-->
		<uni-popup class="visitAddPopup" ref="visitAddPopup" background-color="#f5f6f6" :mask-click="false">
			<view class="dialog-wechat">
				<view class="toshop_title">
					写回访
					<uni-icons class="closed-icon" type="clear" size="30" @click="cancelPopup()"></uni-icons>
				</view>
				<view class="toshop_form">
					<!-- 基础用法，不包含校验规则 -->
					<uni-forms ref="valiForm" :modelValue="query" :rules="rules">
						<uni-forms-item label="回访状态" required>
							<uni-data-picker placeholder="请选择回访状态" popup-title="请选择回访状态" :localdata="reviewStatus"
								@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
								@popupclosed="onpopupclosed">
							</uni-data-picker>

						</uni-forms-item>
						<uni-forms-item label="下次回访时间" required>
							<uni-datetime-picker type="datetime" v-model="query.next_visit_time" />
						</uni-forms-item>
						<uni-forms-item label="备注">
							<uni-easyinput type="textarea" v-model="query.content" placeholder="请输入备注" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="center_bottom">
					<text @click="confirm()">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import dictionary from '@/utils/dictionary.js';
	import sun from '@/utils/sun.js';

	const query = {
		next_visit_time: "",
		status: "",
		content: "",
	};
	export default {
		name: "ykrecord",
		components: {},
		data() {
			return {
				query: Object.assign({}, query), // 搜索条件
				options: {},
				reviewStatus: [],
				// 校验规则
				rules: {
					status: {
						rules: [{
							required: true,
							errorMessage: '门店不能为空'
						}]
					},
				},
			};
		},

		beforeMount() {
			this.dictionary = dictionary;
		},
		watch: {

		},
		onLoad(options) {

		},
		onReachBottom() {


		},
		methods: {
			//关闭微xintianjia
			cancelPopup() {
				this.$refs.visitAddPopup.close()
			},
			showVisitAddPop(options) {
				console.log(options)
				this.options = options;
				this.$refs.visitAddPopup.open('center');
				this.query = Object.assign({}, query)
				this.getFilter();


			},
			//保存
			confirm() {
				let that = this;
				if (!that.query.status) {
					uni.showToast({
						icon: "none",
						title: "请选择回访状态",
					});
					return;
				}
				if (that.query.status != "4" && !that.query.next_visit_time) {
					uni.showToast({
						icon: "none",
						title: "请选择下次回访时间",
					});
					return;
				}
				if (!that.query.content) {
					uni.showToast({
						icon: "none",
						title: "填写备注",
					});
					return;
				}
				sun.request({
					url: "/h5/customer.visit/doCreate",
					showLoading: true,
					token: true,
					data: {
						next_visit_time: that.query.next_visit_time,
						allocate_id: that.options.id,
						content: that.query.content ? that.query.content : "",
						status: that.query.status,
					},
					success(res) {
						if (res.code == 200) {
							that.$emit('getData', that.options)
							that.$refs.visitAddPopup.close()
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 3000,
							});
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
							});
						}
					},
				});
			},
			onnodeclick(e) {},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				this.query.content = ''
				const valueArr = e.detail.value;
				if (valueArr.length === 1) {

					this.$set(this.query, 'status', valueArr[0].value)
				} else {
					[this.query.status, this.query.content] = [valueArr[0].value, valueArr[1].text];
				}
				this.$forceUpdate()

			},
			//获取赛选条件 （回访状态）
			getFilter() {
				let that = this;
				that.reviewStatus = []
				sun.request({
					url: "/h5/customer.visit/create",
					showLoading: true,
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							let arr = res.data.statusList;
							for (let i = 0; i < arr.length; i++) {
								let obj = {
									text: arr[i].title,
									value: arr[i].id.toString(),
									children: []
								};

								if (arr[i].children.length > 0) {
									for (let j = 0; j < arr[i].children.length; j++) {
										let childObj = {
											text: arr[i].children[j],
											value: `${j}`
										};
										obj.children.push(childObj);
									}
								}

								that.reviewStatus.push(obj);
							}
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
							});
						}
					},
				});
			},

		}
	};
</script>

<style lang="less" scoped>
	/deep/.uni-popup .uni-popup__wrapper {
		border-radius: 10px !important;
		width: 95%;
		background-color: white !important;
	}

	/deep/.uni-combox {
		font-size: 14px;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		padding: 8px 10px;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.dialog-wechat {
		position: relative;
		margin: 0 auto;
		text-align: center;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 20px;
		width: 98%;

		.toshop_title {
			width: 100%;
			padding: 15px 0;
			box-sizing: border-box;
			text-align: center;
			color: rgba(25, 25, 25, 1);
			font-size: 16px;
			background-color: #fbfbfb;

			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			position: relative;

			.closed-icon {
				position: absolute;
				left: 10px;
				top: 12px;
			}
		}

		.toshop_form {
			padding: 20px;
			padding-bottom: 0;
		}

		.center_bottom {
			width: 100%;
			height: 99upx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin-bottom: 20px;

			text:first-child {
				width: 194rpx;
				height: 54rpx;
				border: 1rpx solid rgba(64, 108, 235, 1);
				border-radius: 27rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(64, 108, 235, 1);
				line-height: 54upx;
			}

			text:last-child {
				width: 194rpx;
				height: 54rpx;
				border: 1rpx solid rgba(64, 108, 235, 1);
				border-radius: 27rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 54upx;
				background: rgba(64, 108, 235, 1);
			}
		}
	}
</style>
